<script setup lang="ts">
import LuckyWheel from '@lucky-canvas/uni/lucky-wheel'
import { cancelApi, activityDetailApi, userDrawInfoApi, userDrawResidueCountApi, checkDrawEligibleApi, createActivityOrderApi } from '@/api/lucky';
import { getBaseUrl } from '@/utils/env';
import { ref } from 'vue';
import maskVue from './components/mask.vue';
import mumuMusic from './components/mumu-music/index.vue';
// 导入图片资源
import libao0 from './static/luck/0.png';
import libao1 from './static/luck/1.png';
import libao2 from './static/luck/2.png';
import libao3 from './static/luck/3.png';
import libao4 from './static/luck/4.png';
import libao5 from './static/luck/5.png';
import anniu from './static/luck/anniu.png';
import zhuanpan from './static/luck/BJ.png';
import DZP_BJ from './static/luck/DZP_BJ.png';
import hengfu from './static/luck/hengfu.png';
import start from './static/luck/start.png';
import tankuang from './static/luck/tankuang.png';
import wenan from './static/luck/wenan.png';
import wenzi from './static/luck/wenzi.png';
import xiaoanniu from './static/luck/xiaoanniu.png';
import xiexiecanyu from './static/luck/xiexiecanyu.png';

const isShowAwd = ref(false); // 是否显示奖品弹框，抽奖后提示，要么中奖奖品，要么谢谢参与
const code = ref(''); // 密码
const activityId = ref("");
const drawResidueCount = ref(0)
const tempPrizeId = ref();
// 定义 blocks
const blocks = ref([
  { padding: '13px', background: '#617df2', imgs: [{ src: zhuanpan, top: '0', with: '600rpx', height: '600rpx', rotate: true }] },
]);

// 定义 prizes
const prizes = ref([
  { fonts: [{ text: '谢谢', top: '70%', fontWeight: 800, fontColor: '#ee3834' }], background: '#fee08c', imgs: [{ src: libao0, top: '10', with: '100rpx', height: '100rpx' }] },
  { fonts: [{ text: '一等奖', top: '70%', fontWeight: 800, fontColor: '#ee3834' }], background: '#fef2cd', imgs: [{ src: libao1, top: '10', with: '100rpx', height: '100rpx' }] },
  { fonts: [{ text: '二等奖', top: '70%', fontWeight: 800, fontColor: '#ee3834' }], background: '#fee08c', imgs: [{ src: libao2, top: '10', with: '100rpx', height: '100rpx' }] },
  { fonts: [{ text: '三等奖', top: '70%', fontWeight: 800, fontColor: '#ee3834' }], background: '#fef2cd', imgs: [{ src: libao3, top: '10', with: '100rpx', height: '100rpx' }] },
  { fonts: [{ text: '四等奖', top: '70%', fontWeight: 800, fontColor: '#ee3834' }], background: '#fee08c', imgs: [{ src: libao4, top: '10', with: '100rpx', height: '100rpx' }] },
  { fonts: [{ text: '五等奖', top: '70%', fontWeight: 800, fontColor: '#ee3834' }], background: '#fef2cd', imgs: [{ src: libao5, top: '10', with: '100rpx', height: '100rpx' }] },
]);
// 定义 抽奖 奖品
const prize = ref<any>({
  id: 0,
  name: '谢谢参与', // 奖品名称
  img: '', // 奖品图片
  num: 0,
});

// 定义 抽奖按钮 buttons
const buttons = ref([
  { radius: '50px' },
  { radius: '45px' },
  //   {
  //     radius: '40px',
  //     background: '#869cfa',
  //     pointer: true,
  //     fonts: [{ text: '开始\n抽奖', top: '-20px' }],
  //   },
  { imgs: [{ src: start, top: -60, with: '200rpx', height: '200rpx', rotate: true }] },
]);
const rulesDesc = ref<any[]>();
// 定义 defaultStyle
const defaultStyle = ref({
  // 可以在这里定义默认样式
});

// 定义 LuckyWheel 的引用
const myLuckyRef = ref<any>(null);
// 定义抽奖奖品
const prizesIndex = ref<any>(null);

// 点击抽奖按钮触发回调
async function startCallBack() {
  await checkDrawEligibleApi({ activityId: activityId.value, code: code.value })
  getUserDrawInfo()
  if (drawResidueCount.value <= 0) return
  // 先开始旋转
  myLuckyRef.value.play();
  // 使用定时器来模拟请求接口
  setTimeout(() => {
    // 假设后端返回的中奖索引是0
    const index = prizesIndex.value;
    // const index = 9;
    // 调用stop停止旋转并传递中奖索引
    myLuckyRef.value.stop(index);
    // 改变码号为已抽奖
    cancel();
  }, 3000);
}
function getUserDrawInfo() {
  return new Promise(async (resolve, reject) => {
    const data = await userDrawInfoApi(
      { activityId: activityId.value, code: code.value }
    )
    prizesIndex.value = data.prizeIndex;
    prize.value = data.prize
    tempPrizeId.value = data.tempPrizeId;
    resolve(data);
  });
}
// 抽奖结束触发回调
function endCallBack(prize: any) {
  // 奖品详情
  isShowAwd.value = true;
  getUserDrawResidueCount()
}
function loadActivity() {
  activityDetailApi({ activityId: activityId.value }).then((res: any) => {
    rulesDesc.value = res.activity.rulesDesc;
  });
}
async function getUserDrawResidueCount() {
  const data = await userDrawResidueCountApi({
    activityId: activityId.value,
    code: code.value
  })
  drawResidueCount.value = data.userDrawResidueCount;

}
// 核销码号
async function cancel() {
  await cancelApi({ code: code.value, activityId: activityId.value, tempPrizeId: tempPrizeId.value })
}


async function toClaimPages() {
  const data = await await createActivityOrderApi({
    code: code.value,
    activityId: activityId.value,
    tempPrizeId: tempPrizeId.value,
    prizeId: prize.value.id
  });
  uni.navigateTo({
    url: `/pages/orderDetail/index?orderId=${data.order.id}`,
  });
  isShowAwd.value = false;
}
onLoad(async (options: any) => {
  if (options && options.code) {
    code.value = options.code;
  }
  if (options && options.activityId) {
    activityId.value = options.activityId;
    await nextTick;
    loadActivity();
    getUserDrawResidueCount()
  }

});
</script>

<template>
  <view class="content">
    <view class="t-bg" :style="{ backgroundImage: `url(${DZP_BJ})` }">
      <image class="t-wan" :src="wenan" />
      <image class="t-wan-lp" :src="hengfu" />
      <view class="t-choujiang t-flex-row">
        <LuckyWheel ref="myLuckyRef" width="600rpx" height="600rpx" :blocks="blocks" :prizes="prizes" :buttons="buttons"
          :default-style="defaultStyle" @start="startCallBack" @end="endCallBack" />
      </view>
    </view>
    <!-- 规则部分 -->
    <view class="t-bottom">
      <view class="t-luck-wrapper">
        <view class="t-jh t-flex-row" :style="{ backgroundImage: `url(${anniu})` }">
          您还有{{ drawResidueCount }}次机会
        </view>
        <view class="t-line" />
        <view class="t-r-title t-flex-row">
          抽奖规则
        </view>
        <view class="t-rule">
          <block v-for="(item, index) in rulesDesc" :key="index">
            <text>{{ index + 1 }}.{{ item }}</text>
          </block>
        </view>
      </view>
    </view>
    <!-- 抽奖结束弹窗 -->
    <mask-vue :content="prizesIndex !== null ? (prizesIndex === 0 ? '谢谢参与' : '恭喜中奖') : ''" :mask-close="true"
      :z-index="1000" :duration="0.6" :content-style="{}" ani-type="fade" :show="isShowAwd" @click="toClaimPages">
      <view class="t-full t-flex-row">
        <view class="t-tk-modal">
          <view class="t-tk-bg t-bg-full" :style="{ backgroundImage: `url(${tankuang})` }">
            <view v-if="prizesIndex != null && prizesIndex === 0" class="t-xxcy t-flex-col-s">
              <image :src="xiexiecanyu" />
              <view class="t-xxcy-ts t-flex-row">
                再努力努力肯定就会中哦~
              </view>
            </view>
            <view v-if="prizesIndex != null && prizesIndex > 0" class="t-tk-zj t-flex-col-s">
              <image class="t-tk-zj-tip" :src="wenzi" />
              <view class="t-tk-zj-desc t-flex-col">
                <image class="t-zj-jp" :src="`${getBaseUrl()}/${prize.img}`" />
                <view class="t-zj-jp-desc">
                  <!-- 某某公司提供的能量动力
                  {{ prizeId === 5 ? '探亲礼包' : (prizeId === 4 ? '加油卡' : (prizeId === 3 ? '鸡腿'
                    : (prizeId === 2 ? '方便面' : '矿泉水'))) }}, 同等价值{{ prizeId === 5 ? '888' : (prizeId
                    === 4 ? '100'
                    : (prizeId === 3 ? '10' : (prizeId === 2 ? '5' : '2'))) }}元现金已到账微信零钱 -->

                  <text>{{ prize.name }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="t-tk-btn t-bg-full" :style="{ backgroundImage: `url(${xiaoanniu})` }" @click="toClaimPages">
            {{ prizesIndex! > 0 ? '兑奖' : '确定' }}
          </view>
        </view>
      </view>
    </mask-vue>
  </view>
  <!-- <mumuMusic music-src="https://www.77ring.com/lingsheng/%E6%B5%81%E8%A1%8C%E9%87%91%E6%9B%B2/2390912.mp3" /> -->
</template>

<style scoped>
.content {
  width: 100%;
  box-sizing: border-box;
}

.t-bg {
  width: 100%;
  box-sizing: border-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  overflow-x: hidden;
  height: 1200rpx;
  padding-top: 345rpx;
}

.t-overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  transition: all 0.5s;
}

.t-wan {
  position: absolute;
  width: 100%;
  height: 283rpx;
  top: 12rpx;
  left: 0;
  z-index: 1;
}

.t-wan-lp {
  position: absolute;
  width: 370rpx;
  height: 130rpx;
  top: 223rpx;
  z-index: 0;
  left: calc(50% - 185rpx);
}

.t-choujiang {
  width: 630rpx;
  height: 630rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0rpx auto;
  position: relative;
}

.t-zp {
  width: 577rpx;
  height: 577rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.t-start {
  width: 146rpx;
  height: 171rpx;
  position: absolute;
  z-index: 1;
}

.t-jh {
  width: 456rpx;
  height: 120rpx;
  margin: 0 auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 40rpx;
  color: #980100;
}

.t-fuhuo-text {
  font-size: 30rpx;
  color: #980100;
  width: 100%;
  height: 42rpx;
  margin-top: 14rpx;
}

.t-fh-fs {
  width: 580rpx;
  height: 100rpx;
  margin: 20rpx auto 0rpx;
}

.t-fh-fs view {
  width: 250rpx;
  height: 100rpx;
  background-image: linear-gradient(180deg, #df0236 0%, #dd0227 100%);
  border-radius: 10rpx;
  font-size: 30rpx;
  color: #ffffff;
}

.t-share {
  width: 250rpx;
  height: 100rpx;
  background-image: linear-gradient(180deg, #df0236 0%, #dd0227 100%);
  border-radius: 10rpx;
  font-size: 30rpx;
  color: #ffffff;
}

.t-bottom {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  opacity: 0.99;
  background: #fdc469;
}

.t-luck-wrapper {
  position: relative;
  box-sizing: border-box;
  top: -219rpx;
}

.t-line {
  width: 580rpx;
  height: 1rpx;
  margin: 50rpx auto 0rpx;
  background: #980100;
}

.t-r-title {
  font-size: 28rpx;
  color: #980100;
  height: 40rpx;
  width: 100%;
  margin: 30rpx auto 0rpx;
  width: 585rpx;
}

.t-rule {
  margin: 10rpx auto 0rpx;
  width: 585rpx;
}

.t-rule text {
  font-size: 28rpx;
  color: #980100;
  text-align: justify;
  display: block;
}

.t-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0rpx;
}

.t-video-con {
  width: 100%;
  height: 422rpx;
  background: #fff;
  position: relative;
}

.t-video {
  width: 100%;
  height: 100%;
}

.t-close {
  position: absolute;
  top: 0rpx;
  right: 0rpx;
  width: 34rpx;
  height: 34rpx;
  padding: 30rpx;
  z-index: 9999;
}

.t-nocice {
  position: fixed;
  left: 0rpx;
  top: 0rpx;
  z-index: 999;
  width: 100%;
  height: 40rpx !important;
  box-sizing: border-box;
  font-size: 30rpx;
}

.t-tk-modal {
  width: 632rpx;
  height: 588rpx;
  position: relative;
  box-sizing: border-box;
}

.t-tk-bg {
  width: 100%;
  height: 528rpx;
  background-size: 100% 100%;
}

.t-tk-btn {
  width: 336rpx;
  height: 120rpx;
  position: absolute;
  bottom: 0rpx;
  left: calc(50% - 168rpx);
  font-size: 40rpx;
  color: #980100;
  line-height: 120rpx;
  text-align: center;
  background-size: 100% 100%;
}

.t-flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.t-flex-row-sa {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.t-flex-row-sb {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.t-flex-row-s {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.t-flex-row-s-s {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.t-flex-row-s-e {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
}

.t-flex-row-e {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  line-height: 60rpx;
}

.t-flex-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.t-flex-col-sa {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.t-flex-col-sb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.t-flex-col-s {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.t-flex-col-s-s {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.t-flex-col-s-e {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}

.t-flex-col-e {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.t-xxcy image {
  width: 400rpx;
  height: 148rpx;
  margin-top: 139rpx;
}

.t-xxcy-ts {
  width: 510rpx;
  height: 100rpx;
  background: #fef2cd;
  border-radius: 20rpx;
  font-size: 30rpx;
  color: #d93637;
  margin-top: 43rpx;
}

.t-tk-zj {}

.t-tk-zj-tip {
  width: 347rpx;
  height: 106rpx;
  margin-top: 44rpx;
}

.t-tk-zj-desc {
  width: 474rpx;
  height: 281rpx;
  background: #fef2cd;
  border-radius: 20rpx;
  margin-top: 2rpx;
}

.t-zj-jp {
  width: 264rpx;
  height: 157rpx;
}

.t-zj-jp-desc {
  font-size: 30rpx;
  color: #d93637;
  text-align: center;
  width: 420rpx;
  line-height: 60rpx;
  height: 60rpx;
}

.t-click-class {
  opacity: 0.7;
}
</style>
